import React, { Component } from 'react'

export default class App extends Component {


  state = {
    list: ['摇一摇','跳一跳', '扭一扭', '舔一舔', '泡一泡'],
    proList: [
      {
        name: '华为',
        list: [
          'P30',
          'P40',
          'P50'
        ]
      },
      {
        name: '小米',
        list: [
          'M1',
          'M2',
          'M3'
        ]
      },
      {
        name: '锤子',
        list: [
          'T1',
          'T2',
          'T3'
        ]
      }
    ],
    htmlStr: '<h1 style="color: red"> react 从入门到精通 </h1>'
  }

  render() {
    return (
      <div>

        <ul>
          {
            this.state.list.map((item, index, arr)=>{
              return (<li key={index}> {item} </li>)
            })
          }
        </ul>

          {/*
            不要在 jsx 中使用 for 循环系列(for/for in/for of)
            在 react 中建议使用 map ，返回值就是模板
            使用的时候需要添加一个 key 属性

          */}
        <ol>
          {
            this.state.proList.map((item, index)=>{
              return (
                <li key={index}>
                  <h3>{item.name}</h3>
                  <p>
                    {
                      item.list.map((item1,index1)=>{
                        return <span key={item1}>{item1}</span>
                      })
                    }
                  </p>
                </li>
              )
            })
          }

        </ol>

          {this.state.htmlStr}

      </div>
    )
  }
}
